import React, { useState, useRef, useEffect } from 'react'
import { List, Avatar, Row, Col, Typography, Divider } from 'antd';
import axios from 'axios';
export default function Index() {
    useEffect(async () => {
        const resp = await axios.get("http://localhost:8080/userRank",);
        console.log(resp);
        setUserRank(resp.data.list)

        const resp2 = await axios.get("http://localhost:8080/changeRank")
        setChangeRank(resp2.data.list)
    }, [])
    const [userRank, setUserRank] = useState([])
    const [changeRank, setChangeRank] = useState([])

    return (
        <Row className="animate__animated animate__fadeIn">
            <Col span={11}>
                <List
                    header={
                        <Typography.Title level={4} style={{ margin: 0 }}>
                            捐赠榜
                        </Typography.Title>
                    }
                    itemLayout="horizontal"
                    dataSource={userRank}
                    renderItem={(item, index) => (
                        <List.Item>
                            <List.Item.Meta
                                avatar={<><span style={{ margin: 15, color: index <= 2 ? "#FF6800" : '#6298CC', backgroundColor: index <= 2 ? "#FFE4B7" : "#E6F0FD", borderColor: index <= 2 ? "#FFBB8B" : `#B1E0F4`, borderWidth: 1, borderStyle: "solid" }}>{index + 1}</span><Avatar src={`http://localhost:8080/getUserHead?id=${item.id}`} /></>}
                                title={item.nickname}
                                description={`累计积分:${item.point}`}
                                style={{ height: '5VH' }}
                            />
                        </List.Item>
                    )}
                />
                
               
            </Col>
            <Col >
            <Divider plain type="vertical" style={{height:'100%'}}/>
            </Col>
            <Col span={11}>
                <List
                    header={
                        <Typography.Title level={4} style={{ margin: 0 }}>
                            交换榜
                        </Typography.Title>
                    }
                    itemLayout="horizontal"
                    dataSource={changeRank}
                    renderItem={(item, index) => (
                        <List.Item>
                            <List.Item.Meta
                                avatar={<><span style={{ margin: 15, color: index <= 2 ? "#FF6800" : '#6298CC', backgroundColor: index <= 2 ? "#FFE4B7" : "#E6F0FD", borderColor: index <= 2 ? "#FFBB8B" : `#B1E0F4`, borderWidth: 1, borderStyle: "solid" }}>{index + 1}</span><Avatar src={`http://localhost:8080/getUserHead?id=${item.USERID}`} /></>}
                                title={item.nickname}
                                description={`物品数量:${item.COUNT}`}
                                style={{ height: '5VH' }}
                            />
                        </List.Item>
                    )}
                />
            </Col>
        </Row>


    )
}
